<template>
    <div class="time_con">
       <el-date-picker
            v-model="timeDefault"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime">
        </el-date-picker>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import unit from "../../utils/utils";
export default {
  data() {
    return {
      timeDefault: []
    };
  },
  mounted() {
    this.initTime();
  },
  computed: {
    ...mapGetters(["gTime"])
  },
  methods: {
    emit(res) {
      res[0] = unit.parseTime(res[0]);
      res[1] = unit.parseTime(res[1]);
      this.$store.dispatch("setGTime", res);
    },
    initTime() {
      var strTime = JSON.parse(this.$localStorage.get("gTime"));
      // 先从本地存储获取gTime
      this.timeDefault = JSON.parse(this.$localStorage.get("gTime"));
      // 转化为标准时间
      this.timeDefault[0] = unit.formateDate(this.timeDefault[0]);
      this.timeDefault[1] = unit.formateDate(this.timeDefault[1]);
      if (this.timeDefault != null) {
        if (this.timeDefault.length !== 0) {
          // 触发更新时间
          this.$store.dispatch("setGTime", strTime);
        }
      } else {
        this.$store.dispatch("setGTime", []);
      }
    },
    changeTime(res) {
      // 触发更新时间
      this.emit(res);
    }
  }
};
</script>
<style>
.time_con {
  position: fixed;
  right: 0;
  top: 3rem;
  z-index: 100000;
}
</style>

